<template>
  <div class="chart-container">
    <el-form>
      <el-form-item label="选择统计字段">
        <el-radio-group v-model="checkedOption">
          <el-radio
              v-for="option in options"
              :key="option"
              :label="option"
              :value="option"
          >
            {{option}}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选择统计年份">
        <el-select
            v-model="timeRange"
            multiple
            collapse-tags
            style="margin-left: 20px;"
            placeholder="请选择">
          <el-option
              v-for="item in years"
              :key="item"
              :label="item"
              :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="查询数据并生成图表">
        <el-button type="primary" round @click="queryInfo()" icon="el-icon-search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-card class="box-card">
      <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
        <template #default>
          <div id="main"></div>
        </template>
      </el-skeleton>
    </el-card>
  </div>
</template>
<script lang="ts">
import {defineComponent, onMounted, ref, nextTick, reactive, toRefs} from 'vue'
import echarts from "/@/plugins/echarts";
import {getChartData, getChartOptionsData} from "/@/api";
import {endLoading, startLoading} from "/@/utils/loading";
import {errorMessage, successMessage} from "/@/utils/message";
export default defineComponent({
  name:'',
  setup(){
    interface seriesType{
      name:string,
      type:string,
      data:Array<number>
    }
    const loading = ref<boolean>(true);
    const initData=reactive({
      years:[],
      options:[]
    })
    const queryData=reactive({
      checkedOption:'',
      timeRange:[]
    })

    onMounted(()=>{
      startLoading()
      generateYearRange()
      getOptionsArray()
    })
    const generateYearRange=()=>{
      for (let i = 1; i < 100; i++) {
        initData.years.push(2000+i+'')
      }
    }
    const getOptionsArray=async ()=>{
      try{
        // 获取全部下拉列表项
        let res=await getChartOptionsData()
        // 获取要素名称列表
        initData.options=res as Array<any>
        // 关闭加载动画
        endLoading()
      }catch (e){
        errorMessage('网络错误！！！')
        endLoading()
      }
    }
    const queryInfo=async ()=>{
      if(!queryData.checkedOption||queryData.timeRange.length===0){
        errorMessage('请先筛选再查询！')
        return
      }
      try {
        let res=await getChartData({
          group:queryData.checkedOption,
          years:queryData.timeRange
        })
        console.log(res)
        loading.value=false
        await nextTick(() => {
          initChart(res as Array<any>)
        })
      }catch (e) {
        errorMessage('网络错误')
        loading.value=false
      }
    }
    const initChart=(data:Array<any>)=>{
      let chartDom = document.getElementById('main');
      let myChart = echarts.init(chartDom);
      let option;
      let legendArray:Array<string>=[...new Set(data.map(item=>item.year))]
      let xArray:Array<string>=[...new Set(data.map(item=>item.manuName))]
      let yArray:Array<seriesType>=legendArray.map(year=>{
        return {
          name:year,
          type:'line',
          data:data.filter(item=>item.year===year).map(item=>item.number)
        }
      })
      option = {
        title: {
          left: 'center',
          text: '年度各项检查数量变化图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          x:'center',
          y:'bottom',
          padding:[150,0,0,0],
          data: legendArray
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xArray
        },
        yAxis: {
          type: 'value'
        },
        series: yArray
      };

      option && myChart.setOption(option);
      successMessage('绘制完成！')
    }

    return {
      loading,
      queryInfo,
      ...toRefs(queryData),
      ...toRefs(initData)
    }
  }
})
</script>

<style lang='scss' scoped>
.chart-container{
  padding:20px 30px;
  position: relative;
  z-index:-1;
}
.box-card {
  width: 80vw;
  margin: 10px auto;
  position: relative;
  #main{
    width: 70%;
    height: 60vh;
    margin:0 auto;
  }
}
</style>
